<template>
  <el-card>
    <!-- 顶部搜索取 -->
    <el-form label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="标签内容">
            <el-input v-model="tags"
                      size="small"
                      placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <city-view @handleProv="province = $event"
                     @handleCity="city = $event" />
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="shortName"
                      size="small" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form label-width="80px">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="状态">
            <el-input v-model.number="state"
                      placeholder=""
                      size="small"
                      style="width: 280px; margin-right: 60px" />
            <el-button type=""
                       size="small"
                       @click="handleReset">清空</el-button>
            <el-button type="primary"
                       size="small"
                       style="background-color: #409eff; color:#fff"
                       @click="SearchComp">搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="success"
                     style=" background: #67c23a; color: #fff; margin-left:80px"
                     size="small"
                     icon="el-icon-edit"
                     @click="addCompany = true">新增用户</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />
    <el-table :data="companyList">
      <el-table-column label="序号"
                       prop="id" />
      <el-table-column label="企业编号"
                       prop="number" />
      <el-table-column label="企业简称"
                       prop="shortName" />
      <el-table-column label="标签"
                       prop="tags" />
      <el-table-column label="创建者"
                       prop="creatorID" />
      <el-table-column label="创建日期"
                       prop="addDate" />
      <el-table-column label="备注"
                       prop="remarks" />
      <el-table-column label="状态">
        <template #default="{row}">
          <span v-if="row.state ===1">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200px">
        <template #default="{row}">
          <el-button type="primary"
                     icon="el-icon-edit"
                     circle
                     @click="handleOpenDia(row.id)" />
          <el-button v-if="row.state !== 1"
                     type="success"
                     icon="el-icon-check"
                     circle
                     @click="isDisabled(row)" />
          <el-button v-else
                     type="warning"
                     icon="el-icon-close"
                     circle
                     @click="isDisabled(row)" />
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     @click="handleDel(row.id)" />
        </template>

      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :current-page="query.page"
                     :page-sizes="[2, 3, 8, 10]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <!-- 新增用户 -->
    <el-dialog title="新增用户"
               :visible="addCompany"
               @close="handleAddClose">
      <el-form label-width="200px"
               :model="fromData">
        <el-form-item label="企业名称">
          <el-input v-model="fromData.shortName"
                    style="width:60%"
                    size="small" />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="fromData.company"
                    style="width:60%"
                    size="small" />
        </el-form-item>
        <!-- 城市级联 -->
        <city-view :province="fromData.province"
                   :father-city="fromData.city"
                   @handleProv="handleProv"
                   @handleCity="handleCity" />
        <el-form-item label="方向(企业标签)">
          <el-input v-model="fromData.tags"
                    style="width:60%"
                    size="small" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="fromData.remarks"
                    style="width:60%"
                    type="textarea"
                    size="small" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button @click="handleAddClose">取 消</el-button>
        <el-button type="primary"
                   style="background-color: #409eff; color:#fff"
                   @click="handleAddCom">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户"
               :visible="editCompany"
               @close="handleEditClose">
      <el-form label-width="200px"
               :model="fromData">
        <el-form-item label="企业名称">
          <el-input v-model="fromData.shortName"
                    style="width:60%"
                    size="small" />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="fromData.company"
                    style="width:60%"
                    size="small" />
        </el-form-item>
        <!-- 城市级联 -->
        <city-view :province="fromData.province"
                   :father-city="fromData.city"
                   @handleProv="handleProv"
                   @handleCity="handleCity" />
        <el-form-item label="方向(企业标签)">
          <el-input v-model="fromData.tags"
                    style="width:60%"
                    size="small" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="fromData.remarks"
                    style="width:60%"
                    type="textarea"
                    size="small" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button @click="handleEditClose">取 消</el-button>
        <el-button type="primary"
                   style="background-color: #409eff; color:#fff"
                   @click="handleEdit">确 定</el-button>
      </template>
    </el-dialog>

  </el-card>
</template>

<script>
import { getCompanyListAPI, delCompanyAPI, addCompanyAPI, getCompanyDetailAPI, putCompanyAPI, updateCompStateAPI } from '@/api/company-list'

import dayjs from 'dayjs'
export default {
  name: 'CompanyView',
  data () {
    return {
      // 列表数据
      companyList: [],
      // 请求参数
      query: {
        page: 1,
        pagesize: 10
      },
      // 总数
      total: 0,
      // 控制新增弹窗显示
      addCompany: false,
      // 表单数据
      fromData: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      // 控制编辑弹窗显示
      editCompany: false,
      // 数据搜索要用的
      tags: '',
      province: '',
      city: '',
      shortName: '',
      state: ''
    }
  },
  created () {
    this.getCompanyList()
  },
  methods: {
    // 获取公司列表
    async getCompanyList () {
      const res = await getCompanyListAPI(this.query)
      this.companyList = res.items
      this.companyList.forEach(item => {
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD')
      })
      this.total = res.counts
    },
    // 页面条数发生变化时
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getCompanyList()
    },
    // 页码发生变化时
    handleCurrentChange (val) {
      this.query.page = val
      this.getCompanyList()
    },
    // 删除用户
    async handleDel (id) {
      try {
        await this.$confirm('确定删除吗', '提示', {
          type: 'warning'
        })
        if (this.query.page > 1 && this.companyList.length === 1) {
          this.query.page--
        }
        const res = await delCompanyAPI(id)
        console.log(res)
        this.$message.success('删除成功')
        // 刷新页面
        this.getCompanyList()
      } catch (e) {
        console.log(e.message)
      }
    },
    // 关闭新增弹窗
    handleAddClose () {
      this.addCompany = false
    },
    // 新增企业管理
    async handleAddCom () {
      const res = await addCompanyAPI({ ...this.fromData, isFamous: true })
      console.log(res)
      this.handleAddClose()
      this.$message.success('添加成功')
      this.getCompanyList()
    },
    // 城市级联一级
    handleProv (val) {
      this.fromData.province = val
    },
    // 城市级联二级
    handleCity (val) {
      this.fromData.city = val
    },
    // 关闭编辑弹窗
    handleEditClose () {
      this.editCompany = false
      this.fromData = {}
    },
    // 打开编辑弹窗
    async handleOpenDia (id) {
      this.editCompany = true
      // 发请求获取详情
      const res = await getCompanyDetailAPI(id)
      this.fromData = res
    },
    // 修改企业管理
    async handleEdit () {
      this.fromData.isFamous = this.fromData.isFamous === 1 ? this.fromData.isFamous = true : this.fromData.isFamous = false
      await putCompanyAPI(this.fromData)
      // console.log(res)
      // 关闭弹窗
      this.handleEditClose()
      // 刷新页面
      this.getCompanyList()
      this.$message.success('编辑成功')
    },
    // 是否禁用
    async isDisabled (row) {
      if (row.state === 0) {
        try {
          await this.$confirm('确定要启用吗', '提示', {
            type: 'warning'
          })
          await updateCompStateAPI(row.id, 1)
          this.$message.success('启用成功')
          this.getCompanyList()
        } catch (e) {
          //
          console.log(e.message)
        }
      } else {
        try {
          await this.$confirm('确定要禁用吗', '提示', {
            type: 'warning'
          })
          await updateCompStateAPI(row.id, 0)
          this.$message.success('禁用成功')
          this.getCompanyList()
        } catch (e) {
          //
          console.log(e.message)
        }
      }
    },
    // 搜索
    async SearchComp () {
      const res = await getCompanyListAPI({ ...this.query, tags: this.tags, province: this.province, city: this.city, shortName: this.shortName, state: this.state })
      this.companyList = res.items
      this.companyList.forEach(item => {
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD')
      })
      this.total = res.counts
    },
    // 清空
    handleReset () {
      this.getCompanyList()
      this.tags = this.province = this.city = this.shortName = this.state = ''
    }

  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
} */
.el-alert {
  margin-top: 20px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
</style>
